import { defineComponent, inject } from 'vue'
import useDragger from '@/components/editor/utils/useDragger'
import { jsonData } from '@/config/editor.config'
export default defineComponent({
  props: {
    selector: String
  },
  setup(props) {
    const componentList = inject<Array<any>>('componentList')
    // 拖拽事件
    const { dragStart, drawEnd } = useDragger(jsonData, props.selector || '')
    return () => (
      <div class="flex-1 max-w-96">
        {/* 物料表 TODO:类型提示待完善*/}
        {componentList?.map((component: any) => (
          <div
            draggable={true}
            onDragend={drawEnd}
            onDragstart={(e) => dragStart(e, component)}
            key={component.name}
            class="m-4 left-component-item flex justify-center items-center w-90 border rounded-sm h-40"
            data-content={component.name}
          >
            {component.preview}
          </div>
        ))}
      </div>
    )
  }
})
